<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>添加角色</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style>
			body {
				background: #Fff;
			}
			
			.form>form>div label {
				width: 77px;
				text-align: right;
				display: inline-block;
			}
			
			.form>form>div label.error {
				width: auto;
			}
			
			.checkbox>input[type=checkbox].label-input {
				margin-right: -100px;
			}
			
			.itemlist {
				margin-top: -7px;
			}
			
			.note {
				width: 360px;
				height: 121px;
				vertical-align: top;
				margin-left: 5px;
			}
		</style>
	</head>

	<body>
		<div class="form" style="padding:20px 40px;">
			<form class="block-form" id="commentForm">
				<input type="hidden" name="id" id="aid" />
				<div style="margin-top:0px;">
					<label><span class="red">*</span>角色名称：</label>
					<input type="text" class="pro_name" placeholder="请输入角色名称" name="name" id="name" />
				</div>
				<div>
					<label><span class="red">*</span>英文名称：</label>
					<div class="overlay">
						<!--这个是用来存放选中的select的值的-->
						<input type="hidden" value="" class="form-select-value" id="ename" />
						<div class="dropdown">
							<button class="dropdown-toggle form-dropdown" type="button">
				                    <span class="value text-ellipsis pro_catevalue">请选择</span>
				                    <span class="caret"></span>
				            </button>
							<ul class="none">
								<li data-value=''>请选择</li>
								<li data-value='002'>老白干测试系列</li>
								<li data-value='003'>鸿兴酒</li>
								<li data-value='004'>小白干</li>
								<li data-value='001'>二锅头</li>
							</ul>
						</div>
					</div>
					<input type="text" value="" name="ename" style="visibility: hidden; width:0px;" />

				</div>
				<div class="over-hidden">
					<label class="fl"><span class="red">*</span>角色功能：</label>
					<div class="fl itemlist">
						<div class="item">
							<div class="checkbox inline-block">
								<input type="checkbox" value="1" class="label-input" id="checkbox_1" />
								<label for="checkbox_1" class="input-label"></label>
							</div><span>产品管理</span>
						</div>

						<div class="item">
							<div class="checkbox inline-block">
								<input type="checkbox" value="2" class="label-input" id="checkbox_2" />
								<label for="checkbox_2" class="input-label"></label>
							</div><span>铺货管理</span></div>
						<div class="item">
							<div class="checkbox inline-block">
								<input type="checkbox" value="3" class="label-input" id="checkbox_3" />
								<label for="checkbox_3" class="input-label"></label>
							</div><span>菜单管理</span></div>
						<div class="item">
							<div class="checkbox inline-block">
								<input type="checkbox" value="4" class="label-input" id="checkbox_4" />
								<label for="checkbox_4" class="input-label"></label>
							</div><span>企业用户</span></div>
						<div>
							<div class="checkbox inline-block">
								<input type="checkbox" value="5" class="label-input" id="checkbox_5" />
								<label for="checkbox_5" class="input-label"></label>
							</div><span>公告管理</span></div>
						<div class="item">
							<div class="checkbox inline-block">
								<input type="checkbox" value="6" class="label-input" id="checkbox_6" />
								<label for="checkbox_6" class="input-label"></label>
							</div><span>产品管理</span></div>
						<div class="item">
							<div class="checkbox inline-block">
								<input type="checkbox" value="" class="label-input" id="checkbox_7" />
								<label for="checkbox_7" class="input-label"></label>
							</div><span>此处按照菜单管理中的菜单顺序排序</span></div>
					</div>
					<input type="text" value="" class="form-select-value" name="checklist" id="checklist" style="visibility: hidden; width:0px;" />
				</div>
				<div class="over-hidden">
					<label class=" fl"><span class="red hidden">*</span>备注：</label>
					<textarea onkeyup="count(this)" class="note fl" name="note" id="note"></textarea>
					<p class="fr" style="margin-top:10px;margin-right: 40px;">不能超过<span class="number red" id="number">200</span>字</p>
				</div>
				<div>
					<label class="hidden"><span class="red hidden">*</span>产品名称：</label>
					<input type="submit" value="保存" class="search-input-button bgblue" id="subButton" style="margin-right:120px;" />
					<input type="button" value="返回" class="search-input-button " id="backButton" />
				</div>
			</form>
		</div>

		<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>

		<script>
			//这里是字数限制
			function count(obj) {
				len = obj.value.length;
				diff = 200 - len;
				if(diff >= 0) {
					number.innerHTML = diff;
				} else {
					obj.value = obj.value.substr(0, 200);
					number.innerHTML = 0;
				}
			}

			//提交表单
			function ajaxSubmit() {
				console.log('ddd');

			}

			$(document).ready(function() {
				commonObj.checkinit();

				//刚开始就勾选
				var checkarr = ['1', '3', '6'];
				$.each(checkarr, function(index, data) {
					$(".itemlist input:checkbox").each(function() {
						if($(this).val() == data) {
							console.log($(this));
								$(this)[0].checked=true;
								$(this).parent().addClass('checked_checkbox');
						}
					})
				})

				roleobj.checkinit();
				roleobj.validateSuccess();
				roleobj.validateForm();
			});

			var roleobj = {
				'checkinit': function() {
					var checklistObj = $(".itemlist .checkbox input:checkbox");
					checkBoxFun('', checklistObj);
				},
				'validateForm': function() {
					this.setValidateWay();
					$("#commentForm").validate({
						rules: {
							name: {
								required: true,
							},
							ename: {
								isEnameEmpty: true,
							},
							checklist: {
								rolefun: true,
							},
						},
						messages: {
							name: {
								required: "<i class=\" icon icon_error_red \"></i>请输入角色名称",
							},
							ename: {
								required: "<i class=\" icon icon_error_red \"></i>请输入英文名称",
							},
						},
						errorPlacement: function(error, element) {
							error.appendTo('<i class=\" icon icon_error_red \"></i>').appendTo(element.parent());
						},
					});
				},
				'setValidateWay': function() {
					//这里是验证角色功能
					$.validator.addMethod("rolefun", function(value, element) {
						var len = $(".itemlist .checkbox.checked_checkbox").length;
						console.log("len：" + len);
						if(len > 0) {
							return true;
						} else {
							return false;
						}
					}, "<i class=\" icon icon_error_red \"></i>请选择角色功能！");

					$.validator.addMethod("isEnameEmpty", function(value, element) {
						if($('#ename').val()) {
							return true;
						} else {
							return false;
						}
					}, "<i class=\" icon icon_error_red \"></i>请选择英文名称！");

				},
				'validateSuccess': function() {
					$.validator.setDefaults({
						submitHandler: function() {
							//这里放验证成功之后要执行的函数

							var checkObj = $(".itemlist input:checkbox:checked");
							var checkArr = new Array();
							$.each(checkObj, function(index, data) {
								checkArr.push($(data).val());
							})
							var checkStrings = checkArr.join(',');
							console.log(checkStrings);

							ajaxSubmit();
						}
					});
				}
			}
		</script>

	</body>

</html>